import VueComponnet from './index.js'
import VuePages from './plugin2.js'
import Vue from 'vue'
Vue.use(VueComponnet)
Vue.use(VuePages)

export default new Vue({
  el: '#app',
  template: `<div>
  <table>
     <tr>
       <td>
       Vue 原型模式：
       </td>
       <td>
       <div id="pagebox"></div>
       </td>
     </tr>
     <tr>
       <td>特点：</td>
       <td>
         通过Vue原型扩展/Vue.minix 方式将工具函数注入Vue（this.工具函数/Vue钩子函数默认执行）供开发共享使用
       </td>
     </tr>
     <tr>
     <td colspan="2">
       <hr>
     </td>
     </tr>
     <tr>
        <td>
        全局插件模式：
        </td>
        <td>
        <pages-plugin :callback="pagesCallBack" :pageCount="100"></pages-plugin>
        </td>
     </tr>
     <tr>
       <td>
          特点：
       </td>
       <td>
          通过注册全局组件方式，提供插接件的使用。 
       </td>
      </tr>
      <tr>
     </tr>
  </table>
  <hr>
  如上插件方式匀通过提供install函数，供Vue.use(插件) 注册引用。 
  </div>`,
  mounted() {
    // 总条数
    const initPageCount = 100
    // 每页显示条数
    const initPageSize = 50
    // 分页类型
    const pageType = 1
    // 允许切换的每页显示条数集合[10, 20, 30...]
    const sizeArray = [10, 20, 30, 50]
    // 分页要展示的位置id
    const bindElementId = "pagebox"
    this.$initPages(this.pagesCallBack, bindElementId, initPageCount, initPageSize, pageType, sizeArray)
  },
  methods: {
    pagesCallBack(pageIndex, pageSize) {
      console.log("pages callback: ", pageIndex, pageSize)
    }
  }
})